html,
body,
.hr_,
div {
    padding: 0;
    margin: 0;
}
body {
    background: #f4f4f4;
}
.log {
    position: absolute;
    width: 100%;
    height: 2.7rem;
    top: 0;
    left: 0;
    background: linear-gradient(#f1b1a5, #ffeee5);
    .log_img {
        width: 88%;
        margin-left: 6%;
    }
}

//日历样式
.con_rili {
    position: relative;
    padding: 0.15rem 0 0.05rem 0;
    border-radius: 0.05rem;
    width: 92%;
    background: #ffffff;
    margin: 0 auto;
    z-index: 1;
    box-shadow: 5px 5px 15px #dfe0e2;
    margin-top: 62%;
    margin-bottom: 0.1rem; //月份tit
    .rili_yue {
        margin-bottom: 0.12rem;
        img {
            display: block;
            width: 28%;
            margin: 0 auto;
        }
    } //周tit
    .rili_zhou {
        width: 93%;
        margin: 0 auto;
        margin-bottom: 0.15rem;
        img {
            width: 100%;
            margin: 0 auto;
            display: block;
        }
    }
    .hr_ {
        width: 100%;
        height: 1px;
        margin-bottom: 0.15rem;
        background: #e6e6e6;
        border: none;
    } //日历表格图片
    .con_box {
        padding: 0 5px;
        position: relative;
        .f {
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin-bottom: 0.12rem;
            div {
                width: 13.2%;
                height: 13.2%;
                img {
                    height: 100%;
                    width: 100%;
                    display: block;
                }
            }
            img {
                width: 13.2%;
                height: 13.2%;
            }
            #css3_ {
                position: relative;
                .dong {
                    position: absolute;
                    top: -0.01rem;
                    left: -0.015rem;
                } //点击提示 扩散动画
                @keyframes warn {
                    0% {
                        transform: scale(0.3);
                        opacity: 0.0;
                    }
                    25% {
                        transform: scale(0.3);
                        opacity: 0.3;
                    }
                    50% {
                        transform: scale(0.3);
                        opacity: 0.3;
                    }
                    75% {
                        transform: scale(0.5);
                        opacity: 0.5;
                    }
                    100% {
                        transform: scale(0.8);
                        opacity: 0.0;
                    }
                }
                .css3>.container {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    background: #000;
                }
                /* 保持大小不变的小圆圈  */
                .dot {
                    position: absolute;
                    z-index: 2;
                    width: 0.16rem;
                    height: 0.16rem;
                    left: 0.125rem;
                    top: 0.125rem;
                    background: rgba(255, 255, 255, 0.8);
                    border-radius: 50%;  
                }
                /* 产生动画（向外扩散变大）的圆圈  */
                .pulse {
                    position: absolute;
                    width: 0.36rem;
                    height: 0.36rem;
                    left: -0.023rem;
                    top: -0.023rem;
                    border: 0.05rem solid white;
                    border-radius: 50%;
                    z-index: 2;
                    opacity: 0;
                    -webkit-animation: warn 1s ease-out;
                    -moz-animation: warn 1s ease-out;
                    animation: warn 1s ease-out;
                    -webkit-animation-iteration-count: infinite;
                    -moz-animation-iteration-count: infinite;
                    animation-iteration-count: infinite;
                    box-shadow: 0.01rem 0.01rem 0.1rem #fff;
                }
            }
        }
    }
}

//特殊日期代表颜色
.colors {
    width: 100%;
    img {
        width: 70%;
        display: block;
        margin: 0.25rem auto;
    }
}

.state {
    width: 100%;
    text-align: center;
    img {
        width: 90%;
        display: block;
        margin: 0 auto;
        margin-bottom: 0.25rem;
    }
}

//内容样式
.content {
    width: 100%;
    display: flex;
    flex-direction: column;
    .con_flex {
        width: 95%;
        margin: 0 auto;
        margin-top: 0.1rem;
        .one {
            padding-top: 0.1rem;
        }
        img {
            display: block;
            width: 100%;
            padding-left: 0.9%;
        }
    }
}

//底部版权说明
.botm {
    width: 100%;
    height: 0.2rem; //margin-bottom: 0.1rem;
    line-height: 0.05rem;
    p {
        font-size: 0.1rem;
        color: #b7b7b7;
        text-align: center;
    }
}

//回到顶部按钮
#top {
    position: fixed;
    right: 0;
    bottom: 30%;
    z-index: 2;
    width: 0.3rem;
    height: 0.3rem;
    display: none;
    border-radius: 50%;
    img {
        width: 100%;
        border-radius: 50%;
        opacity: 0.5;
    }
}